import React, { memo, useState } from "react";
import classnames from "classnames";
import { useSelector, shallowEqual } from "react-redux";

import "./index.scss";
import WYSongOperationBar from "components/song-operation-bar";
import { getSizeImage } from "@/utils/format-utils";

const WYPlayerInfo = memo(function (props) {
  // state-props
  const [isSpread, setIsSpread] = useState(false);

  // hook
  const { currentSong, lyricList } = useSelector(
    (state) => ({
      currentSong: state.getIn(["play", "currentSong"]),
      lyricList: state.getIn(["play", "lyricList"]),
    }),
    shallowEqual
  );
  return (
    <div className="player-info-wrap ">
      {/* 左边 */}
      <div className="info-left">
        <div className="image">
          <img src={getSizeImage(currentSong.al.picUrl, 130)} alt="" />
          <span className="cover image_cover"></span>
        </div>
        <div className="link">
          <i className="sprite_icon2"></i>
          <a href="#/">生成外联播放器</a>
        </div>
      </div>
      {/* 右边 */}
      <div className="info-right">
        <div className="info-right-header">
          <i className="sprite_icon2"></i>
          <h3 className="title">{currentSong.name}</h3>
        </div>
        <div className="singer">
          <span className="label">歌手：</span>
          <a href="/#" className="name">
            {currentSong.ar[0].name}
          </a>
        </div>
        <div className="album">
          <span className="label">所属专辑：</span>
          <a href="/#" className="name">
            {currentSong.al["name"]}
          </a>
        </div>
        <WYSongOperationBar
          favorTitle="收藏"
          shareTitle="分享"
          downloadTitle="下载"
          commentTitle={currentSong.dt}
        />
        <div className="lyric">
          <div
            className={classnames("lyric-info", isSpread ? "info-z" : "info-s")}
          >
            {lyricList.map((item, index) => (
              <p className="text" key={index}>
                {item.content}
              </p>
            ))}
          </div>
          <button
            className="lyric-control"
            onClick={(e) => setIsSpread(!isSpread)}
          >
            {isSpread ? "收起" : "展开"}
            <i
              className={classnames(
                "sprite_icon2",
                isSpread ? "zhankai" : "shouqi"
              )}
            ></i>
          </button>
        </div>
      </div>
    </div>
  );
});

export default WYPlayerInfo;
